<template>
  <div>
    <a-modal :visible="visible" @before-open="open" @ok.stop="handleOk" @cancel="handleCancel" :align-center="false" title-align="start" width="900px" :mask-closable="false">
      <template #title> 货位绑定SKU </template>
      <div class="title">
        <div class="item">
          <div class="left">
            <div class="label">仓库：</div>
            <div class="text">{{ detail.warehouseName }}</div>
          </div>
          <div class="right">
            <div class="label">货位状态：</div>
            <div class="text" style="border: none">{{ detail.status == 1 ? '占用' : '空闲' }}</div>
          </div>
        </div>
        <div class="item">
          <div class="left">
            <div class="label">货架：</div>
            <div class="text">{{ detail.shelvesCode }}</div>
          </div>
          <div class="right">
            <div class="label">货位：</div>
            <div class="text" style="border: none">{{ detail.locationCode }}</div>
          </div>
        </div>
      </div>

      <div style="margin-top: 10px; display: flex">
        <a-input-search v-model="searchValue.shopName" @clear="getInventoryList" @search="getInventoryList" placeholder="请输入店铺名称" :style="{ width: '160px' }" allow-clear />
        <FilterKeyword style="margin-left: 10px" :options="filterWorldOpt.keyItems" :label-width="filterWorldOpt.keyWidth" :width="filterWorldOpt.width" :default-label="filterWorldOpt.key" :isMultiple="filterWorldOpt.isMultiple" @search="searchKeyword" />
        <a-cascader :style="{ width: '160px', margin: '0 10px' }" @change="getInventoryList" v-model="searchValue.cateId" allow-clear :max-tag-count="1" check-strictly :multiple="false" :options="categoryOptions" :field-names="{ value: 'id', label: 'name' }" placeholder="请选择类目" />
        <a-select placeholder="请选择" @change="getInventoryList" v-model="searchValue.attribute" :style="{ width: '160px' }" allow-clear>
          <a-option label="良品" value="good"></a-option>
          <a-option label="次品" value="defective"></a-option>
        </a-select>
      </div>

      <div style="margin-top: 10px; width: 100%">
        <a-table size="mini" class="table-singe-line" ref="table" @sorter-change="sortChange" :loading="loading" row-key="id" @selection-change="selectRow" :row-selection="rowSelection" :columns="columns" :data="tableList" :pagination="false" :scroll="{ x: '100%', y: 400 }">
          <template #columns>
            <a-table-column title="序号" :width="40">
              <template #cell="{ record, rowIndex }"> {{ rowIndex + 1 }} </template>
            </a-table-column>
            <a-table-column title="仓库名称" :width="120">
              <template #cell="{ record }">
                {{ record.warehouseName }}
              </template>
            </a-table-column>
            <a-table-column title="店铺" :width="120">
              <template #cell="{ record }">
                {{ record.shopName }}
              </template>
            </a-table-column>
            <a-table-column title="图片" :width="60">
              <template #cell="{ record }">
                <ImgPopover :src="record.productImg">
                  <template #con>
                    <a-image width="40" height="40" fit="contain" :src="record.productImg" />
                  </template>
                </ImgPopover>
              </template>
            </a-table-column>
            <a-table-column title="产品名称/SKU" :width="120">
              <template #cell="{ record }">
                <a-popover>
                  <p style="color: #619bd8; width: 100%" class="text-limit">{{ record.productName }}</p>
                  <p style="color: #619bd8; width: 100%" class="text-limit">
                    <span>{{ record.sku }}</span>
                  </p>
                  <template #content>
                    <p>{{ record.productName }}</p>
                    <p>{{ record.sku }}</p>
                  </template>
                </a-popover>
              </template>
            </a-table-column>
            <a-table-column title="MSKU/FNSKU" :width="120">
              <template #cell="{ record }">
                <a-popover>
                  <p style="width: 100%" class="text-limit">
                    {{ record.msku }}
                  </p>
                  <p style="width: 100%" class="text-limit">
                    {{ record.fnsku }}
                  </p>
                  <template #content>
                    <p>{{ record.msku }}</p>
                    <p>{{ record.fnsku }}</p>
                  </template>
                </a-popover>
              </template>
            </a-table-column>
            <a-table-column title="库存属性" :width="80">
              <template #cell="{ record, rowIndex }">{{ record.attribute == 'good' ? '良品' : '次品' }} </template>
            </a-table-column>
            <a-table-column title="库位编号" :width="80">
              <template #cell="{ record, rowIndex }">{{ record.locationCode }} </template>
            </a-table-column>
            <a-table-column
              title="可用量"
              :sortable="{
                sortDirections: ['ascend', 'descend'],
              }"
              #cell="{ record, rowIndex }"
              :width="80"
              fixed="right"
            >
              <span>{{ record.amtAvailable }}</span>
            </a-table-column>
          </template>
        </a-table>
      </div>
    </a-modal>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, reactive, toRefs, computed } from 'vue'
  import { locationBindInventory, findInventoryList } from '@/api/warehouse'
  import { Message } from '@arco-design/web-vue'
  import FilterKeyword from '@/components/Form/filterKeyword.vue'
  import { getCategoryList } from '@/api/product'
  export default defineComponent({
    props: ['detail'],
    components: { FilterKeyword },
    setup(props: any, { emit }) {
      let visible = ref(false)
      const formRef = ref()
      const table = ref()
      const data: any = reactive({
        tableList: [],
        searchValue: {},
        filterWorldOpt: {
          key: 'skus',
          keyItems: [
            { label: 'SKU', value: 'skus' },
            { label: 'SPU', value: 'spus' },
            { label: 'MSKU', value: 'mskus' },
            { label: 'FNSKU', value: 'fnskus' },
            { label: '产品名称', value: 'productName' },
          ],
          keyWidth: '100',
          value: ref(),
          placeholder: '请输入',
          label: 'SKU',
          width: 160,
          isMultiple: true,
        },
        categoryOptions: [],
        rowSelection: {
          type: 'checkbox',
          showCheckedAll: true,
          onlyCurrent: false,
        },
        selectList: [],
      })

      const open = () => {
        // getUserList()
        console.log(props.detail)
        getCategory()
        getInventoryList()
      }
      const handleOk = async () => {
        if (data.selectList.length <= 0) {
          return Message.error('请选择需要绑定的产品')
        }
        let params = {
          id: props.detail.id,
          inventoryIds: data.selectList,
        }
        const res: any = await locationBindInventory(params)
        if (res.code == 'SUCCESS') {
          Message.success('绑定成功')
          visible.value = false
          data.selectList.forEach((e: any) => {
            table.value.select(e, false)
          })
          emit('save')
        }
      }
      const handleCancel = () => {
        visible.value = false
      }

      const getCategory = async () => {
        const res: any = await getCategoryList()
        data.categoryOptions = res.data
      }
      const selectRow = (val: any) => {
        data.selectList = val
      }
      const sortChange = (index: string, code: string) => {
        if (code == 'ascend') {
          data.tableList.sort((a: any, b: any) => {
            return a.amtAvailable - b.amtAvailable
          })
        } else {
          data.tableList.sort((b: any, a: any) => {
            return b.amtAvailable - a.amtAvailable
          })
        }
      }

      const searchKeyword = (info: any) => {
        data.searchValue.skus = ''
        data.searchValue.spus = ''
        data.searchValue.mskus = ''
        data.searchValue.fnskus = ''
        data.searchValue.productName = ''
        data.searchValue[info.code] = info.value
        getInventoryList()
      }

      const getInventoryList = async () => {
        let params = {
          ...data.searchValue,
          warehouseCodes: props.detail.warehouseCode,
        }
        const res = await findInventoryList(params)
        data.tableList = res?.data
      }
      return {
        ...(toRefs(data) as any),
        visible,
        formRef,
        open,
        handleOk,
        handleCancel,
        selectRow,
        sortChange,
        getInventoryList,
        searchKeyword,
        table,
      }
    },
  })
</script>

<style lang="less" scoped>
  .title {
    width: 100%;
    border: 1px solid #d7d7d7;
    .item {
      width: 100%;
      display: flex;
      border-bottom: 1px solid #d7d7d7;
      line-height: 30px;
      &:last-child {
        border-bottom: none;
      }
      .left {
        display: flex;
        width: 50%;
        .label {
          width: 100px;
          height: 30px;
          text-align: right;
          border-right: 1px solid #d7d7d7;
          background: #f2f2f2;
        }
        .text {
          height: 30px;
          flex: 1;
          text-align: left;
          border-right: 1px solid #d7d7d7;
          margin-left: 5px;
        }
      }
      .right {
        display: flex;
        width: 50%;
        .label {
          width: 100px;
          height: 30px;
          text-align: right;
          border-right: 1px solid #d7d7d7;
          background: #f2f2f2;
        }
        .text {
          height: 30px;
          flex: 1;
          text-align: left;
          border-right: 1px solid #d7d7d7;
          margin-left: 5px;
        }
      }
    }
  }
</style>
